<template>
    <transition name="fade">
        <div id="component-dialog-box" class="container">
            <div class="mask"></div>
            <div class="wrapper">
                <div class="content">
                    <div class="colse" v-if="showClose" @click="close">×</div>
                    <div class="sign-text" v-html="signText"></div>
                    <div class="btn-wrap">
                        <button :style="{color:cancelTextColor}"
                             v-if="showCancel"
                             @click="cancel"
                             class="cancel"
                        >
                            {{cancelText?cancelText:'取消'}}
                        </button>
                        <button :style="{color:confirmTextColor}"
                             @click="confirm"
                             class="confirm"
                        >
                            {{confirmText?confirmText:'确定'}}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        props: {
            signText:{
                type:String,
                default:'是否执行此操作？'
            },
            cancelText:{
                type:String,
                default:'取消'
            },
            confirmText:{
                type:String,
                default:'确定'
            },
            cancelTextColor:{
                type:String,
                default:''
            },
            confirmTextColor:{
                type:String,
                default:''
            },
            showCancel:{
                type:Boolean,
                default:true
            },
            showClose:{
                type:Boolean,
                default:true
            },
        },
        data(){
            return {

            }
        },
        watch:{
        },
        methods:{
            cancel(){
                this.$emit('closeDialogBox',{
                    confirm:false,
                    cancel:true,
                    close:false
                });
                // this.close();
            },
            confirm(){
                this.$emit('closeDialogBox',{
                    confirm:true,
                    cancel:false,
                    close:false
                });
                // this.close();
            },
            close(){
                // this.$store.commit('changeDialogBoxShow',false);
                this.$emit('closeDialogBox',{
                    confirm:false,
                    cancel:false,
                    close:true
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .fade-enter, .fade-leave-to  {
        opacity: 0;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
#component-dialog-box{
    .over-screen(fixed);
    background-color: transparent;
    z-index: 9998;
    font-family: AlibabaPuHuiTiR;
    .fz(16px);

    .mask {
        .over-screen(absolute, 50);
        z-index: 9999;
    }

    .wrapper{
        .size;
        .content{
            position: relative;
            @btn-height:60px;
            .width(400px);
            .center(translate);
            background-color: #ffffff;
            z-index: 10000;
            .border-radius(7px);

            .colse{
                .close;
                position: absolute;
                right: 10px;
                top: 5px;
            }
            .sign-text{
                line-height: 20px;
                text-align: center;
                .fz(#2B2B2B);
                padding: 60px 20px 60px;
            }
            .btn-wrap{
                .clearfix;
                .lh(@btn-height);
                text-align: center;
                border-top: 1px solid #E6E6E6;
                button{
                    .size(49%,100%);
                    font-family: AlibabaPuHuiTiR;
                    cursor: pointer;
                }
                .cancel{
                    .color(@main-color);
                    border-right: 1px solid #E6E6E6;
                }
                .confirm{
                    .color(#686767);
                }
            }

        }
    }
}
</style>